<template>
  <div class="app-container">
    <div class="filter-condition">
      <label>条件搜索</label>
      <el-form
        size="mini"
        :inline="true"
        class="mini-form"
        style="flex: 1"
        :model="temp"
        @submit.native.prevent
      >
        <el-col :span="5">
          <el-form-item>
            <el-date-picker
              v-model="temp.dateOrderRange"
              type="monthrange"
              align="right"
              format="yyyy-MM"
              value-format="yyyy-MM"
              range-separator="~"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions"
              @change="getPageData"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <el-row>
      <el-col :span="2">
        <label class="row-label">业务操作</label>
      </el-col>
      <el-col :span="22" class="align-right">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handleStatistical"
          >
            {{ $t('table.statisticalDetails') }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            class="refresh-button"
            @click="handleRefresh"
          >
            {{ $t('table.refresh') }}
          </el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <client-table
      ref="mainTable"
      v-loading="loading"
      :style="{ height: `${commonLayoutHeight}px` }"
      :columns="columns"
      :data="rowData"
      show-summary
      @row-double-clicked="handleClicked"
      @selection-change="handleSelectionChange"
    />
    <!-- 明细 -->
    <statistics-dialog
      :visible.sync="dialogVisible"
      :data="temp"
      :type-list="typeList"
      :platform-list="platformList"
      @add-data="handleRefresh"
    />
  </div>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
import { getConstantByType } from '@/utils/index'
import { getBasisList } from '@/api/basic-data'
import { getList } from '@/api/statistics'
import statisticsDialog from './components/StatisticsDialog.vue'

export default {
  name: 'CreditStatistics',
  components: {
    statisticsDialog
  },
  data() {
    return {
      dataList: [],
      constants: [],
      coordinate: [],
      multipleSelection: [],
      multipleSelectionNodes: [],
      columns: [
        {
          headerName: '日期',
          field: 'date'
        },
        {
          headerName: '进账',
          field: 'totalCredit',
          showSummary: true
        },
        {
          headerName: '总支出',
          field: 'totalDisburse',
          showSummary: true
        },
        {
          headerName: '总收入',
          field: 'totalIncome',
          showSummary: true
        },
        {
          headerName: '微信支出',
          field: 'weChatDisburse',
          showSummary: true
        },
        {
          headerName: '微信收入',
          field: 'weChatIncome',
          showSummary: true
        },
        {
          headerName: '支付宝支出',
          field: 'alipayDisburse',
          showSummary: true
        },
        {
          headerName: '支付宝收入',
          field: 'alipayIncome',
          showSummary: true
        },
        {
          headerName: '银行卡支出',
          field: 'bankCardDisburse',
          showSummary: true
        },
        {
          headerName: '银行卡收入',
          field: 'bankCardIncome',
          showSummary: true
        }
      ],
      rowData: [],
      temp: {
        amountTrend: '01',
        endDate: '',
        beginDate: '',
        checked: false,
        dateOrderRange: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 状态
      typeList: [],
      actualList: [],
      platformList: [],
      orderAddList: [
        {
          name: '新增',
          command: 'add'
        },
        {
          name: '再来一单',
          command: 'addList'
        }
      ],
      orderManageList: [
        {
          name: '审核',
          command: 'check'
        },
        {
          name: '取消审核',
          command: 'uncheck'
        }
      ],
      checked: false,
      loading: false,
      incomeVisble: false,
      dialogVisible: false
    }
  },
  computed: {
    ...mapState('app', {
      commonLayoutHeight: (state) => state.height.clientHeight - 225
    })
  },
  created() {
    this.setDefaultDateRange()
    this.getConstant()
    this.getPageData()
  },
  methods: {
    // 表格数据
    async getPageData() {
      this.loading = true
      const params = Object.assign({}, this.temp)
      if (params.dateOrderRange) {
        params.beginDate = params.dateOrderRange[0]
        params.endDate = params.dateOrderRange[1]
      }
      delete params.dateOrderRange
      const result = await getList('getCreditStatistics', params)
      if (result.code === 200) {
        this.rowData = JSON.parse(JSON.stringify(result.data.pageItems))
        this.dataList = JSON.parse(JSON.stringify(result.data.pageItems))
        setTimeout(() => {
          this.loading = false
        }, 300)
      }
    },
    // 常量
    async getConstant() {
      const result = await getBasisList('constant', { type: 1 })
      if (result.code === 200) {
        this.constants = JSON.parse(JSON.stringify(result.data.pageItems))
        this.typeList = await getConstantByType(this.constants, 1)
        this.actualList = await getConstantByType(this.constants, 4)
        this.platformList = await getConstantByType(this.constants, 2)
      }
    },
    setDefaultDateRange() {
      // 获取当前月份
      var currentMonth = moment().format('MM')
      var startOfYear = ''
      var endOfYear = ''
      if (currentMonth !== '12') {
        startOfYear = moment().year().toString() - 1 + '-12' // 去年的12月
        endOfYear = moment().year().toString() + `-${currentMonth}` // 今年的月份
      } else {
        startOfYear = moment().year().toString() + '-01' // 今年的1月
        endOfYear = moment().year().toString() + '-12' // 今年的12月
      }
      this.temp.dateOrderRange = [startOfYear, endOfYear]
    },
    // 明细
    handleStatistical() {
      this.dialogVisible = true
    },
    handleClicked(row) {
      this.temp.beginDate = row.date
      this.temp.endDate = row.date
      this.dialogVisible = true
    },
    // 选中数据
    handleSelectionChange(val, nodes) {
      this.multipleSelection = val
      this.multipleSelectionNodes = nodes
    },
    // 刷新
    handleRefresh() {
      this.getPageData()
      this.coordinate = []
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
